import React from 'react';
import { useSettings } from '@/hooks/web/useSettings';

const SlThemeSwitcher: React.FC = () => {
    const { theme, changeTheme, locale } = useSettings();

    return (
        <div className="setting-item">
            <label>{locale.settings.theme}</label>
            <div className="theme-preview">
                <div
                    className={`theme-item light ${theme === 'light' ? 'active' : ''}`}
                    onClick={() => changeTheme('light')}
                    title={locale.themeNames.light}
                />
                <div
                    className={`theme-item dark ${theme === 'dark' ? 'active' : ''}`}
                    onClick={() => changeTheme('dark')}
                    title={locale.themeNames.dark}
                />
                <div
                    className={`theme-item blue ${theme === 'blue' ? 'active' : ''}`}
                    onClick={() => changeTheme('blue')}
                    title={locale.themeNames.blue}
                />
            </div>
            <div className="theme-names">
                <span className={theme === 'light' ? 'active' : ''}>{locale.themeNames.light}</span>
                <span className={theme === 'dark' ? 'active' : ''}>{locale.themeNames.dark}</span>
                <span className={theme === 'blue' ? 'active' : ''}>{locale.themeNames.blue}</span>
            </div>
        </div>
    );
};

export default SlThemeSwitcher;